<template>
    <div>
        <el-form :inline="true" :model="salesManagement" class="demo-form-inline">
            <el-form-item label="销售单号:">
                <el-input v-model="searchData.SalesCode" placeholder="请输入" style="width: 180px;"></el-input>
            </el-form-item>
            <el-form-item label="产品编号:">
                <el-input v-model="searchData.ProductCode" placeholder="请输入" style="width: 180px;"></el-input>
            </el-form-item>
            <el-form-item label="产品名称:">
                <el-input v-model="searchData.ProductName" placeholder="请输入" style="width: 180px;"></el-input>
            </el-form-item>
            <el-form-item label="订单状态:">
                <el-select v-model="searchData.State" placeholder="请选择" style="width: 120px;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="GetSalesManagementDtoAsync()">
                    <i class="el-icon-search">&nbsp;</i>查询
                </el-button>
                &nbsp;&nbsp;
                <el-button @click="reset()"><i class="el-icon-refresh"></i>&nbsp;重置</el-button>
                &nbsp;&nbsp;
                <el-button type="success" @click="add()"><i class="el-icon-plus"></i>&nbsp;添加</el-button>
                &nbsp;&nbsp;
                <el-button type="danger" @click="BatchDel()"><i class="el-icon-delete"></i>&nbsp;批量删除</el-button>
                &nbsp;&nbsp;
                <el-button type="success" plain @click="exportListToExcel(ids)"><i
                        class="el-icon-upload2"></i>&nbsp;导出</el-button>
            </el-form-item>
        </el-form>

        <p></p>

        <el-table :data="salesManagement" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" fixed align="center">
            </el-table-column>
            <el-table-column prop="salesCode" fixed label="销售订单号" align="center">
            </el-table-column>
            <el-table-column prop="productName" fixed label="产品名称" align="center">
            </el-table-column>
            <el-table-column prop="productCode" fixed label="产品编号" align="center">
            </el-table-column>
            <el-table-column prop="specs" label="产品规格" align="center">
            </el-table-column>
            <el-table-column prop="unit" label="单位" align="center">
            </el-table-column>
            <el-table-column prop="price" label="单价" align="center">
            </el-table-column>
            <el-table-column prop="saleNum" label="数量" align="center">
            </el-table-column>
            <el-table-column label="总额" align="center">
                <template slot-scope="scope">
                    {{ scope.row.price * scope.row.saleNum }}
                </template>
            </el-table-column>
            <el-table-column prop="outboundShipments" label="出库数" align="center">
            </el-table-column>
            <el-table-column prop="clientCode" label="客户编号" align="center">
            </el-table-column>
            <el-table-column prop="clientName" label="客户名" align="center">
            </el-table-column>
            <el-table-column prop="" label="订单总额" align="center">

                <template slot-scope="scope">
                    {{ scope.row.price * scope.row.outboundShipments }}
                </template>
            </el-table-column>
            <el-table-column prop="creatorTime" label="创建时间" align="center">

                <template slot-scope="scope">
                    {{ scope.row.creatorTime.substring(0, 10) }}
                </template>
            </el-table-column>
            <el-table-column prop="state" label="状态" align="center">

                <template slot-scope="scope">
                    <span v-if="scope.row.state == 1">全部出货</span>
                    <span v-if="scope.row.state == 2">订单取消</span>
                    <span v-if="scope.row.state == 3">订单确认</span>
                    <span v-if="scope.row.state == 4">部分出货</span>
                </template>
            </el-table-column>
            <el-table-column prop="recordedState" label="是否入账" align="center">

                <template slot-scope="scope">
                    <span v-if="scope.row.recordedState == true">是</span>
                    <span v-if="scope.row.recordedState == false">否</span>
                </template>
            </el-table-column>
            <el-table-column prop="isReturn" label="退货" align="center">

                <template slot-scope="scope">
                    <span v-if="scope.row.isReturn == false">退</span>
                    <span v-if="scope.row.isReturn == true"></span>
                </template>
            </el-table-column>
            <el-table-column prop="returnNumber" label="退货数" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center" width="240px">

                <template slot-scope="scope">
                    <el-link type="primary" @click="Install(scope.row.id)"><i class="el-icon-view"></i>查看</el-link>
                    &nbsp;&nbsp;
                    <el-link type="danger" @click="del(scope.row.id)"><i class="el-icon-delete"></i>删除</el-link>
                    &nbsp;&nbsp;
                    <el-link type="warning" @click="Return(scope.row.id)"><i class="el-icon-share"></i>退货</el-link>
                    &nbsp;&nbsp;
                    <!-- <el-link type="warning" @click="Recorded(scope.row.id)"><i class="el-icon-thumb
"></i>入账</el-link> -->
                </template>
            </el-table-column>
        </el-table>

        <!-- 查看弹框 -->
        <el-dialog title="销售订单明细" :visible.sync="dialogFormVisible">

            <template #title>
                <div style="text-align: left;">销售订单明细</div>
            </template>
            <el-descriptions v-model="info">
                <el-descriptions-item label="订单号">{{
            info.salesCode
        }}</el-descriptions-item>
                <el-descriptions-item label="单据类型">
                    <span v-if="info.documentType == 1">实际订单</span>
                    <span v-if="info.documentType == 2">预计订单</span>
                    <span v-if="info.documentType == 3">暂存订单</span>
                </el-descriptions-item>
                <el-descriptions-item label="单据状态">
                    <span v-if="info.state == 1">创建订单</span>
                    <span v-if="info.state == 2">取消订单</span>
                </el-descriptions-item>
                <el-descriptions-item label="关联单号">{{
            info.productId
        }}</el-descriptions-item>
                <el-descriptions-item label="制单人">{{
                info.clientName
            }}</el-descriptions-item>
                <el-descriptions-item label="制单日期">{{
                new Date(info.creatorTime).toLocaleString()
            }}</el-descriptions-item>
                <el-descriptions-item label="发货日期">{{
                new Date(info.creatorTime).toLocaleString()
            }}</el-descriptions-item>
                <el-descriptions-item label="客户编号">{{
                info.clientCode
            }}</el-descriptions-item>
                <el-descriptions-item label="客户名称">{{
                info.clientName
            }}</el-descriptions-item>
                <el-descriptions-item label="联系人">{{
                info.creator
            }}</el-descriptions-item>
                <el-descriptions-item label="电话">{{
                info.phone
            }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{
                info.remarks
            }}</el-descriptions-item>
            </el-descriptions>

            <p></p>
            <br>
            <el-table border style="width: 100%;background-color: gainsboro;" :data="productList">
                <el-table-column prop="productCode" label="产品编码"></el-table-column>
                <el-table-column prop="productName" label="产品名称">
                </el-table-column>
                <el-table-column prop="specs" label="规格"> </el-table-column>
                <el-table-column prop="unit" label="单位"> </el-table-column>
                <el-table-column prop="saleNum" label="数量"> </el-table-column>
                <el-table-column prop="price" label="单价"> </el-table-column>
                <el-table-column label="总额">

                    <template slot-scope="scope">
                        {{ scope.row.price * scope.row.saleNum }}
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>

        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                总共{{ page.totalCount }}条数据，每页显示{{ page.pageSize }}条数据，共{{ page.pageCount }}页，当前第{{ page.pageIndex }} /
                {{ page.pageCount }}页
            </el-form-item>
            <el-form-item>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page.pageIndex" :page-sizes="[5, 10, 15, 20]" :page-size="page.pageSize"
                    layout="sizes,slot, prev, pager, next" :total="page.totalCount" prev-text="上一页" next-text="下一页">
                    <button @click="handleCurrentChange(1)" :disabled="page.pageIndex == 1">首页</button>
                </el-pagination>
            </el-form-item>
            <el-form-item>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page.pageIndex" :page-sizes="[5, 10, 15, 20]" :page-size="page.pageSize"
                    layout="slot,jumper" :total="page.totalCount" prev-text="上一页" next-text="下一页">
                    <button @click="handleCurrentChange(page.pageCount)"
                        :disabled="page.pageIndex == page.pageCount">尾页</button>
                </el-pagination>
            </el-form-item>
        </el-form>

        <!-- 销售退货弹出层 -->
        <el-dialog title="销售订单明细" width="80%" :visible.sync="dialogFormVisible1">

            <template #title>
                <div style="text-align: left;">销售订单明细</div>
            </template>
            <el-descriptions v-model="info">
                <el-descriptions-item label="订单号">{{
            info.salesCode
        }}</el-descriptions-item>
                <el-descriptions-item label="单据类型">
                    <span v-if="info.documentType == 1">实际订单</span>
                    <span v-if="info.documentType == 2">预计订单</span>
                    <span v-if="info.documentType == 3">暂存订单</span>
                </el-descriptions-item>
                <el-descriptions-item label="单据状态">
                    <span v-if="info.state == 1">创建订单</span>
                    <span v-if="info.state == 2">取消订单</span>
                </el-descriptions-item>
                <el-descriptions-item label="关联单号">{{
            info.productId
        }}</el-descriptions-item>
                <el-descriptions-item label="制单人">{{
                info.clientName
            }}</el-descriptions-item>
                <el-descriptions-item label="制单日期">{{
                new Date(info.creatorTime).toLocaleString()
            }}</el-descriptions-item>
                <el-descriptions-item label="发货日期">{{
                new Date(info.creatorTime).toLocaleString()
            }}</el-descriptions-item>
                <el-descriptions-item label="客户编号">{{
                info.clientCode
            }}</el-descriptions-item>
                <el-descriptions-item label="客户名称">{{
                info.clientName
            }}</el-descriptions-item>
                <el-descriptions-item label="联系人">{{
                info.creator
            }}</el-descriptions-item>
                <el-descriptions-item label="电话">{{
                info.phone
            }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{
                info.remarks
                    }}</el-descriptions-item>
            </el-descriptions>

            <p></p>
            <br>

            {{ productList }}
            <el-table border style="width: 120%;background-color: gainsboro;" :data="productList">
                <el-table-column prop="productCode" label="产品编码"></el-table-column>
                <el-table-column prop="productName" label="产品名称">
                </el-table-column>
                <el-table-column prop="specs" label="规格" width="50"> </el-table-column>
                <el-table-column prop="unit" label="单位" width="50"> </el-table-column>
                <el-table-column prop="saleNum" label="数量" width="50"> </el-table-column>
                <el-table-column prop="price" label="单价"> </el-table-column>
                <el-table-column prop="returnNumber" label="退货数">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.returnNumber" :min="1" :max="scope.row.saleNum"
                            placeholder="1"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column label="总额">

                    <template slot-scope="scope">
                        {{ scope.row.price * scope.row.returnNumber }}
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="Confirm()">确认</el-button>
                <el-button @click="dialogFormVisible1 = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { GetSalesManagementDtoAsync, DelSalesManagement, BatchDelSearchSalesManagement, FillSalesManagement1Async, FileSalesManagement2DtoAsync, IsReturnSearchSalesManagement, IsRecordedSearchSalesManagement, RefunAdd } from "@/api/BusinessServers/SalesManagement";
import XLSX from 'xlsx';
import { autoGenerateCode } from "@/utils/utils";
export default {
    //数据
    data() {
        return {
            options: [
                {
                    value: 0,
                    label: '请选择'
                }
                , {
                    value: 1,
                    label: '全部出货'
                }, {
                    value: 2,
                    label: '订单取消'
                }, {
                    value: 3,
                    label: '订单完成'
                }, {
                    value: 4,
                    label: '部分出货'
                }],
            //查询条件
            searchData: {
                SalesCode: "",
                ProductCode: "",
                ProductName: "",
                State: "",
            },
            //销售管理列表
            salesManagement: [],
            //分页
            page: {
                pageIndex: 1,
                pageSize: 5,
                pageCount: 0,
                totalCount: 0
            },
            //选中的复选框
            ids: [],
            dialogFormVisible: false,
            dialogFormVisible1: false,
            //获取销售管理控件值
            info: {
                id: "",
                salesCode: "",
                productId: "",
                outboundShipments: "",
                clientName: "",
                phone: "",
                ordersSum: "",
                documentType: "",
                delivery: "",
                creator: "",
                creatorTime: "",
                state: "",
                remarks: "",
                clientCode: "",
            },
            //产品列表
            productList: [],
            idss: "",
        }
    },
    //计算属性
    computed: {
        sid() {
            var sid = [];
            this.ids.forEach((item) => {
                sid.push(item.id);
            })
            return sid;
        },
    },
    //方法
    methods: {
        //显示销售管理
        GetSalesManagementDtoAsync() {
            let data = {
                salesCode: this.searchData.SalesCode,
                productCode: this.searchData.ProductCode,
                productName: this.searchData.ProductName,
                state: this.searchData.State || 0,
                pageIndex: this.page.pageIndex,
                pageSize: this.page.pageSize,
            };

            GetSalesManagementDtoAsync(data).then((res) => {
                this.salesManagement = res.data.data.data;

                this.page.pageCount = res.data.pageCount;
                this.page.totalCount = res.data.totalCount;
            });
        },
        //获取要选中的复选框Id
        handleSelectionChange(val) {
            this.ids = val;
        },
        //重置
        reset() {
            //刷新页面
            location.reload();
        },
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.GetSalesManagementDtoAsync();
        },
        handleCurrentChange(val) {
            this.page.pageIndex = val;
            this.GetSalesManagementDtoAsync();
        },
        del(id) {
            this.$confirm('您确定要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.Del(id);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //删除仓库
        Del(id) {
            let data = {
                id: id
            };

            DelSalesManagement(data).then(res => {
                if (res.data.totalCount > 0) {
                    this.$message.success('删除成功');
                    this.GetSalesManagementDtoAsync();
                    this.page.pageIndex == 1;
                }
                else {
                    this.$message.error('删除失败');
                }
            })
        },
        //批量删除仓库
        BatchDel() {
            if (this.ids.length == 0) {
                this.$message({
                    message: '请至少选择一条要删除的数据！',
                    type: 'warning'
                });
                return
            }
            var data = {
                delId: this.sid.toString(),
            }

            this.$confirm('此操作将永久批量删除该文件?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                BatchDelSearchSalesManagement(data).then((res) => {
                    if (res.data.totalCount > 0) {
                        this.$message({
                            message: "批量删除成功",
                            type: "success",
                        });
                        this.GetSalesManagementDtoAsync();
                        this.page.pageIndex == 1;
                    } else {
                        this.$message({
                            message: "批量删除失败",
                            type: "error",
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消批量删除'
                });
            });
        },
        //导出
        exportListToExcel(ids) {
            //验证
            if (this.ids.length == 0) {
                this.$message({
                    message: '请至少选择一条要导出的数据！',
                    type: 'warning'
                });
                return
            }

            // 过滤需要导出的字段
            const aaa = ids.map(item => {
                return {
                    销售订单号: item.salesCode,
                    产品名称: item.productName,
                    产品编号: item.productCode,
                    产品规格: item.specs,
                    单价: item.price,
                    出库数: item.outboundShipments,
                    客户编号: item.clientCode,
                    客户名: item.clientName,
                    创建时间: item.creatorTime,
                    状态: item.state,
                    是否入账: item.recordedState,
                    退货: item.isReturn,
                };
            });
            const worksheet = XLSX.utils.json_to_sheet(aaa);
            //设置表格宽度
            worksheet['!cols'] = [
                { width: 10 },
                { width: 15 },
                { width: 15 },
                { width: 20 },
                { width: 15 },
                { width: 15 },
                { width: 10 },
                { width: 15 },
                { width: 15 },
                { width: 15 },
                { width: 15 },
                { width: 15 },
                { width: 15 },
                { width: 15 },
                { width: 15 },
                { width: 15 },
            ];

            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
            // 导出Excel文件
            XLSX.writeFile(workbook, '乔建伟的销售管理.xlsx');
        },
        //查看销售管理
        Install(id) {
            this.dialogFormVisible = true;

            let data = {
                id: id
            };

            FillSalesManagement1Async(data).then((res) => {
                this.info = res.data.data;
                this.productList = res.data.data.fileSalesManagement2DtoList;
            });
        },
        //跳转到添加页面
        add() {
            this.$router.push({ path: "/BusinessMenge/SalesManagement/SalesManagementAdd" });
        },
        //退货
        Return(id) {
            this.dialogFormVisible1 = true;

            let data = {
                id: id
            };
            this.idss = id;
            FillSalesManagement1Async(data).then((res) => {
                console.log(res.data);
                this.info = res.data.data;
                this.productList = res.data.data.fileSalesManagement2DtoList;
            });
        },
        //确认退货
        Confirm() {
            var code = autoGenerateCode("TH");

            var par = {
                id: this.idss,
                salesId: this.info.salesCode,
                clientName: this.info.clientName,
                salesReturnCode: code,
                saleDtoss: this.productList,
            };
            console.log(par);

            RefunAdd(par).then((res) => {
                if (res.data.totalCount > 0) {
                    this.$message({
                        message: "退货成功",
                        type: "success",
                    });
                    this.dialogFormVisible1 = false;
                    this.GetSalesManagementDtoAsync();
                } else {
                    this.$message({
                        message: "添加失败",
                        type: "error",
                    });
                }
            });
        },
        //入账
        Recorded(id) {
            this.$confirm('您确定要入账吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let data = {
                    id: id
                };

                IsRecordedSearchSalesManagement(data).then((res) => {
                    if (res.data.totalCount > 0) {
                        this.$message({
                            type: 'success',
                            message: '入账成功!'
                        });
                        this.GetSalesManagementDtoAsync();
                    } else {
                        this.$message({
                            type: 'info',
                            message: '退货失败!'
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
    },
    //勾子函数加载数据
    created() {
        this.GetSalesManagementDtoAsync();
    },
}
</script>

<style>
.el-table__header {
    background-color: #ddd;
}
</style>